/**
*@Create:YMHUI
*@DateTime:2019/10/188:54
*@Description:TODO
**/
<template>
    <div>
        <el-row>
            <el-col :span="6">
                <el-card>
                    <el-tree ref="dimenTree" :data="questionnaire.dimensions" :props="defaultProps"
                             @node-click="nodesClick"/>
                </el-card>
            </el-col>
            <el-col :span="18">
                <el-card>
                    <el-table :data="questionnaire.questions" height="400px" fit>
                        <el-table-column label="题目" width="700px">
                            <template slot-scope="scope">
                                <el-checkbox :label="scope.row.topic"
                                             v-model="scope.row.checked"
                                             :disabled="isDisable(scope.$index)"
                                             @change="questionSelect(scope.$index)">
                                </el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column label="题型">
                            <template slot-scope="scope">
                                <span>{{getQuestionTypeLabel(scope.row.type)}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--                    <el-row v-for="(question, index) in questionnaire.questions" :key="index"-->
                    <!--                            style="text-align: left">-->
                    <!--                        <el-col :span="18">-->
                    <!--                            <el-checkbox :ref="index"-->
                    <!--                                         :label="question.topic"-->
                    <!--                                         v-model="question.checked"-->
                    <!--                                         :disabled="isDisable(index)"-->
                    <!--                                         @change="questionSelect(index)">-->
                    <!--                            </el-checkbox>-->
                    <!--                        </el-col>-->
                    <!--                        <el-col :span="6">{{getQuestionTypeLabel(question.type)}}</el-col>-->
                    <!--                    </el-row>-->
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {mapActions, mapGetters} from 'vuex';
    import CONSTANTS from '../../common/constants';

    export default {
        name: "TopicBinding",
        computed: {
            ...mapGetters('questionnaire', [
                'currentQuestionnaire'
            ])
        },
        data() {
            return {
                questionnaire: {},
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                questions: [],
                selectedQuestions: []
            };
        },
        methods: {
            ...mapActions('questionnaire', [
                'setCurrentQuestionnaire'
            ]),

            nodesClick() {
                let node = this.$refs.dimenTree.getCurrentNode();
                console.log("nodeClick", node);
            },
            isChecked(index) {
                let node = this.$refs.dimenTree.getCurrentNode();
                if (node === null) {
                    return false;
                }
                if (this.questionnaire.questions[index].dimension === "") {
                    console.log("dimension is null");
                    return false;
                }
                if (this.questionnaire.questions[index].dimension === node.name) {
                    console.log("checked!");
                    return true;
                }
            },
            isDisable(index) {
                let node = this.$refs.dimenTree.getCurrentNode();
                if (node === null) {
                    return true;
                }
                if (!this.questionnaire.questions[index].dimension) {
                    return false;
                }

                if (this.questionnaire.questions[index].dimension === node.name) {
                    return false;
                } else {
                    return true;
                }
            },
            questionSelect(index) {
                if (!this.isChecked(index)) {
                    this.questionnaire.questions[index].dimension = this.$refs.dimenTree.getCurrentNode().name;
                    this.questionnaire.questions[index].dimensionTempTag = this.$refs.dimenTree.getCurrentNode().dimensionTempTag;
                    this.questionnaire.questions[index].checked = true;
                    if (this.$refs.dimenTree.getCurrentNode().questions.length !== 0) {
                        for (let i in this.$refs.dimenTree.getCurrentNode().questions) {
                            if (this.questionnaire.questions[index].sort === this.$refs.dimenTree.getCurrentNode().questions[i].sort) {
                                this.$refs.dimenTree.getCurrentNode().questions.splice(i, 1);
                                break;
                            }
                        }
                    }

                    this.$refs.dimenTree.getCurrentNode().questions.push(this.questionnaire.questions[index]);
                    this.$refs.dimenTree.getCurrentNode().questionNum += 1;
                } else {
                    this.questionnaire.questions[index].dimension = "";
                    this.questionnaire.questions[index].dimensionTempTag = "";
                    this.questionnaire.questions[index].checked = false;
                    for (let i in this.$refs.dimenTree.getCurrentNode().questions) {
                        if (this.questionnaire.questions[index].sort === this.$refs.dimenTree.getCurrentNode().questions[i].sort) {
                            this.questionnaire.questions[index].dimension = "";
                            this.$refs.dimenTree.getCurrentNode().questions.splice(i, 1);
                            this.$refs.dimenTree.getCurrentNode().questionNum -= 1;
                            break;
                        }
                    }
                }
                this.setCurrentQuestionnaire(this.questionnaire);
            },
            getQuestionTypeLabel(type) {
                if (CONSTANTS.QUESTION_TYPE.FILL === type) {
                    return CONSTANTS.QUESTION_TYPE_LABEL.FILL;
                } else if (CONSTANTS.QUESTION_TYPE.SINGLE === type) {
                    return CONSTANTS.QUESTION_TYPE_LABEL.SINGLE;
                } else {
                    return ""
                }
            }
        },
        watch: {
            currentQuestionnaire() {
                this.questionnaire = this.currentQuestionnaire;
            }
        },
        mounted() {
            this.questionnaire = this.currentQuestionnaire;
        }
    }
</script>

<style scoped>

</style>
